<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Loading content with AJAX</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.common.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/nova.core.js"></script>
        <script src="../../source/js/nova.fx.js"></script>
        <script src="../../source/js/nova.draganddrop.js"></script>
        <script src="../../source/js/nova.resizable.js"></script>
        <script src="../../source/js/nova.window.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <!-- description -->
        <div id="example" class="n-content">
            <div class="configuration">
                <span class="infoHead">Information</span>
                <p>
                    This example shows how to load the content of the window using Ajax.
                </p>
            </div>


            <!-- Window HTML -->
            <div id="window"></div>

            <!-- open button -->
            <span id="undo" style="display:none" class="n-group">Click here to open the window.</span>

            <script>
                $(document).ready(function() {
                    var window = $("#window"),
                        undo = $("#undo")
                                .bind("click", function() {
                                    window.data("novaWindow").open();
                                    undo.hide();
                                });

                    var onClose = function() {
                        undo.show();
                    }

                    if (!window.data("novaWindow")) {
                        window.novaWindow({
                            width: "500px",
                            title: "nova Window",
                            contentUrl: 'ajax/ajaxContent.html',
                            close: onClose
                        });
                    }

                });
            </script>

            <style scoped="scoped">
                #undo {
                    text-align: center;
                    position: absolute;
                    white-space: nowrap;
                    border-width: 1px;
                    border-style: solid;
                    padding: 2em;
                    cursor: pointer;
                }
            </style>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>
